<template>
	<view class="flex-column" style="padding: 20rpx 2rpx;width: 98%;">
		<view style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 5;" @click="close" v-show="show"></view>
		<view class="flex">
			<view style="height: 67px;width: 67px;">
				<image :src="curryMusic.poster"></image>
			</view>
			<view class="flex-column padding-cross-10 flex1 music-border" style="width: calc(98% - 67px);">
				<view class="flex" style="justify-content: space-between;text-overflow: ellipsis;white-space: nowrap;">
					<text style="text-overflow: ellipsis;white-space: nowrap;flex: 1;max-height: fit-content;overflow: hidden;">{{curryMusic.name}}</text>
					<text>{{newTimes}}</text>
				</view>
				<view>{{curryMusic.author}}</view>
				<view class="flex center" style="justify-content: space-around;">
					<u-icon name="download" size="25" @click="downloadMusic"></u-icon>
					<u-icon name="rewind-left" size="25" @click="change(-1)"></u-icon>
					<u-icon name="pause-circle" v-if="isPlay" size="25" @click="changeStatus"></u-icon>
					<u-icon name="play-circle" v-else size="25" @click="changeStatus"></u-icon>
					<u-icon name="rewind-right" size="25" @click="change(1)"></u-icon>
					<u-icon name="list" size="25" @click.stop.prevent="openlist"></u-icon>
				</view>
			</view>
		</view>
		<view class="flex-column" v-show="show" style="bottom: 0;left: 0;right: 0;max-height: 40vh;overflow: scroll;position: fixed;z-index:100;background-color: #fff;">
			<view style="text-align: center;width: 100%;position: sticky;top: 0;left: 0;right: 0;margin: 10rpx 0;">播放列表</view>
			<view v-for="(item,index) in items" :key="index" class="flex center" style="row-gap: 10rpx;padding-left: 10rpx;" @click="goMusic(index)">
				<view style="font-weight: 700;">{{item.name}}</view>
				&nbsp;&nbsp; - &nbsp;&nbsp;
				<view style="font-size: 0.7rem;font-weight: 500;">{{item.author}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { en } from '../../utils/dayjs.min';
	
	export default{
		name:"music",
		props:{
			items:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data(){
			return {
				isPlay:false,
				index:0,
				instance:null,
				times:null,
				timer:null,
				show:false,
			}
		},
		created(){
			this.instance = wx.createInnerAudioContext();
		},
		methods:{
			goMusic(index){
				this.index = index;
				this.show = false
				if(this.isPlay){
					this.instance.pause();
					this.isPlay = false;
					clearTimeout(this.timer)
				}
				this.times = this.items[this.index].duration;
				this.$nextTick(()=>{
					this.isPlay = true;
					this.instance.play();
				})
			},
			close(){
				this.show = false;
			},
			openlist(event){
				// console.log(event);
				this.show = true;
				// event.stopPropagation()
			},
			change(index){
				this.instance.pause();
				let _index = this.index;
				_index = _index + index;
				let lastStatu = this.isPlay;
				if(_index<0){
					this.index = this.items.length - 1;
					this.times = this.items[this.index].duration;
					// if(this.isPlay){
					// 	this.changeStatus()
					// }
					this.changeStatus()
					if(lastStatu){
						this.instance.play()
						if(!this.times){
							this.times = Number(this.items[this.index].duration);
							console.log('duration',this.times)
						}else{
							this.times = this.times - 1
						}
					}
					return
				}
				if(_index>=this.items.length){
					this.index = 0;
					this.times = this.items[0].duration;
					this.changeStatus()
					if(lastStatu){
						this.instance.play()
						if(!this.times){
							this.times = Number(this.items[this.index].duration);
							console.log('duration',this.times)
						}else{
							this.times = this.times - 1
						}
					}
					return
				}
				this.index = this.index + index;
				this.changeStatus()
				if(lastStatu){
					this.instance.play()
					if(!this.times){
						this.times = Number(this.items[this.index].duration);
						console.log('duration',this.times)
					}else{
						this.times = this.times - 1
					}
				}
				this.times = this.items[this.index].duration;
			},
			changeStatus(){
				if(this.isPlay){
					console.log('暂停')
					this.instance.pause()
					clearTimeout(this.timer)
				}else{
					console.log('播放')
					this.instance.play()
					if(!this.times){
						this.times = Number(this.items[this.index].duration);
						console.log('duration',this.times)
					}else{
						this.times = this.times - 1
					}
				}
				this.isPlay = !this.isPlay;
			},
			downloadMusic(){
				let src = this.items[this.index].src;
				let manger = wx.getFileSystemManager()
				wx.downloadFile({
					url:src,
					success:(res)=>{
						console.log(res)
						manger.saveFile({
							tempFilePath:res.tempFilePath,
							success:(res)=>{
								wx.showToast({
									title:'保存成功',
									icon:'success',
									duration:1000
								})
							}
						})
					}
				})
			}
		},
		computed:{
			curryMusic(){
				let item = this.items[this.index];
				if(item){
					this.instance.src = item.src;
					this.instance.onPlay((listener) => {
					  console.log('开始播放',listener)
					});
					this.instance.onCanplay((listener)=>{
						console.log('listener:',listener)
					});
					// console.log('duration',this.instance.duration)
				}
				return this.items[this.index]
			},
			newTimes(){
				// console.log('computed this.times',this.times)
				if(!this.times){
					return '00:00'
				}
				let min = Math.floor(Number(this.times) / 60);
				if(String(min).length == 1){
					min = "0" + min
				}
				let srcond = Number(this.times) % 60;
				if(String(srcond).length == 1){
					srcond = "0" + srcond
				}
				if(this.isPlay){
					this.timer = setTimeout(()=>{
						this.times = this.times - 1
					},1000)
				}
				return min + ':' + srcond
			}
		},
		beforeDestroy(){
			if(this.instance){
				this.instance.destroy()
			}
			if(this.timer){
				clearTimeout(this.timer)
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.flex{
		image{
			height: 67px;
			width: 67px;
			overflow: auto;
		}
	}
	
	.music-border{
		border: 2rpx solid #c3c3c3;
		border-left: 0 solid transparent;
	}
</style>